<template>
	<div class="count-views">
		<div class="card">
			<div class="card__header">
				<span class="value">用户走势图</span>
				<!-- <span class="value">8846</span> -->
			</div>

			<div class="card__container" @click="openUser()">
				<v-chart :option="chartOption" autoresize />
			</div>

			<div class="card__footer">
				<span class="label">总用户</span>
				<span class="value">{{ total }}</span>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, inject, ref } from "vue";
import * as echarts from "echarts";
import { useCool } from "/@/core";

export default defineComponent({
	setup() {
		const { router } = useCool();

		const chartOption = reactive({
			grid: {
				left: 0,
				top: 0,
				right: 0,
				bottom: 0
			},
			tooltip: {
				trigger: "axis"
			},
			xAxis: {
				type: "category",
				data: [
					"00:00",
					"2:00",
					"4:00",
					"6:00",
					"8:00",
					"10:00",
					"12:00",
					"14:00",
					"16:00",
					"18:00",
					"20:00",
					"22:00"
				],
				boundaryGap: false
			},
			yAxis: {
				type: "value",
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				axisLabel: {
					show: false
				}
			},
			series: [
				{
					name: "新增用户",
					type: "line",
					smooth: true,
					showSymbol: false,
					symbol: "circle",
					symbolSize: 6,
					data: [
						"1200",
						"1400",
						"1008",
						"1411",
						"1026",
						"1288",
						"1300",
						"800",
						"1100",
						"1000",
						"1118",
						"1322"
					],
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: "#D1E5FF"
									},
									{
										offset: 1,
										color: "#FFFFFF"
									}
								],
								false
							)
						}
					},
					itemStyle: {
						normal: {
							color: "#4165d7"
						}
					},
					lineStyle: {
						normal: {
							width: 2
						}
					}
				}
			]
		});
		let total = ref<Number>(0);
		// 请求服务
		const service = inject<any>("service");
		onMounted(() => {
			service.userHome.userChart({ dayCount: 15 }).then((res: any) => {
				chartOption.xAxis.data = res.dates;
				chartOption.series[0].data = res.datas;
			});
			service.userHome.userTotal().then((res: any) => {
				total.value = res[0].total;
			});
		});

		function openUser() {
			router.push({
				path: "/user/info",
				query: {}
			});
		}
		return { router, openUser, chartOption, total };
	}
});
</script>

<style lang="scss" scoped>
.count-views {
	.card {
		.echarts {
			height: 50px;
			width: 100%;
		}

		&__container {
			padding: 0;
		}

		&__footer {
			border-top: 0;
		}
	}
}
</style>
